<template>
    <div class="login_container">
        <div class="login_box">
            <!-- 头像区域 -->
            <div class="avatar_box">
                <img src="../assets/logo.png" alt="">
            </div>

            <!-- 表单 -->
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username"  prefix-icon="iconfont icon-user"></el-input>
                </el-form-item>
                <!-- 密码 --> 
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
                </el-form-item>
                <!-- 按钮区域 -->
                <el-form-item class='btns'>
                   <el-button type="primary" @click="login" >登录</el-button>
                   <el-button type="info" @click = "resetLoginFormRef">重置</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>

</template>

<script>

// 行为区域
export default {
    data(){
        return {
            // 登录表单的数据绑定对象
            loginForm:{
                username:"admin",
                password:"123456",
            },
            // 验证登陆表单规则
            loginFormRules:{
                // 用户名是否合法
                username:[
                    // required:必填,message:提示信息,trigger:触发时机
                    { required:true,message:'请输入账户',trigger:'blur' },
                    { min:3,max:6,message:"长度在3-6个字符",trigger:'blur'}
                ],
                // 密码是否合法
                password:[
                    { required:true,message:'请输入密码',trigger:'blur' },
                    { min:3,max:6,message:"长度在3-6个字符",trigger:'blur'}
                ]
            }
        }
    },
    methods:{
        // 重置按钮 登录表单 用ref在模板中设置loginFormRef 拿到表单的引用对象
        resetLoginFormRef(){
            this.$refs.loginFormRef.resetFields()
        },
        login(){
            // 登录前数据验证
            this.$refs.loginFormRef.validate(async valia =>{
                if(!valia) return;
                // 解构 拿到响应想要的数据
                const {data:res} =await this.$http.post('login',this.loginForm)
                // console.log(res);
                if (res.meta.status !== 200) return this.$message.error('登录失败')
                this.$message.success('登录成功')
                // 1.将登录成功之后的token, 保存到客户端的sessionftorage 中
                    // 1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
                    // 1.2 token 只应在当前网站打J开期间生效，所以将token 保存在sessionStorage 中
                window.sessionStorage.setItem('token',res.data.token)
                // 2.通过编程式导航跳转到后台主页，路由地址是/home
                this.$router.push('./home')

            })
        },
    }
};

</script>

<style lang='less' scoped>
    // scoped样式只在当前组件内生效 去掉就是全局生效
.login_container {
    background-color: #2b4b6b;
    height: 100%;
}

.login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%); // 横移自身长度的一半 使其居中

    .avatar_box{
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow:0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }

// 表单区域
.login_form{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box; // 压缩到我们预想盒子的区域
}


// 按钮区域
.btns {
    display: flex;
    justify-content: flex-end;  // 伸缩盒子右对齐
}

}

</style>